<script setup>
import Mobile from "./components/Mobile.vue";
import FormTitle from "@/components/Form/FormTitle.vue";
import Topbar from "@/components/Topbar/index.vue";
import { onMounted, ref } from "vue";
import Form from "@/components/Form/index.vue";
import Module from "./components/Module.vue";
const backValue = ref("bannerManagementIndex");
const tabName = ref("Banner详情");
const baseformRef = ref();
const baseformList = ref([
  {
    type: "text",
    key: "name1",
    label: "Banner标题",
    placeholder: "标题名称",
    width: "260px",
    clearable: true,
    maxlength: "10",
    showlimit: true,
  },
  {
    type: "upload",
    style: "width:380px;height:152px;",
    key: "image",
    label: "Banner图",
    tip: "图片建议上传5:2尺寸，宽度≥686px，仅可上传1张，大小不超过2M",
    tipStyle:
      "color: #666666;font-size: 12px;font-weight: 400;margin-top:8px;line-height: normal;",
  },
  {
    type: "text",
    key: "date",
    label: "生效时间",
  },
  {
    type: "upload",
    style: "width:190px;height:152px;",
    key: "image",
    label: "分享主图",
    tip: "图片建议上传5:4尺寸，仅可上传1张，大小不超过1M",
    tipStyle:
      "color: #666666;font-size: 12px;font-weight: 400;margin-top:8px;line-height: normal;",
  },
]);
const baseformRules = {
  name1: [{ required: true, message: "请输入员工姓名", trigger: "change" }],
};
const orginModuleList = ref([
  // {
  //   imgList: [],
  //   radio: 3,
  //   pbradio: 3,
  //   selectImgList: [],
  //   fileUrl: [],
  //   tableData: [],
  //   pageConfig: {
  //     currentPage: 1,
  //     pageSize: 10,
  //     layout: "total,sizes, prev, pager, next",
  //     pageSizes: [10, 20, 50, 100, 200],
  //     total: 0,
  //   },
  // },
]);
const moduleRef = ref();

const sumbit = () => {};
const moduleKey = ref("");
const moduleList = ref([]);
const moduleChange = (e) => {
  moduleList.value = e;
};
const moduleRadioChange = (data) => {
  moduleList.value = data.list;
  moduleKey.value = data.value;
};

onMounted(() => {
  moduleList.value = [];
  baseformRef.value.setForm({ name1: "1" });
});
</script>
<template>
  <div class="page-contain">
    <Topbar :backValue="backValue" :tabName="tabName"> </Topbar>
    <div class="flex info-contain justify-content-between">
      <div class="">
        <FormTitle class="mb16" :titleName="'基本信息'"></FormTitle>
        <Form
          ref="baseformRef"
          :formList="baseformList"
          :formRules="baseformRules"
          labelWidth="98px"
        ></Form>
        <FormTitle class="mb16" :titleName="'活动详情'"></FormTitle>
        <Module
          ref="moduleRef"
          :showBtn="false"
          :moduleList="orginModuleList"
          @change="moduleChange"
          @radioChange="moduleRadioChange"
        ></Module>
      </div>
      <Mobile
        :key="moduleKey"
        class="mobile"
        :list="(moduleList?.length && moduleList) || orginModuleList"
      ></Mobile>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mobile {
  margin-left: 51px;
}
.page-contain {
  width: 100%;
  height: 100%;
  :deep(.el-table th > .cell) {
    border-right: 0;
  }
  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-left: 1px solid #3480ff;
  }
  .info-contain {
    width: 100%;
    // height: calc(100%);
    box-sizing: border-box;
    padding: 16px 24px 0;
    .btn-opea {
      width: 100%;
      height: 32px;
    }
    .info-lis {
      width: 100%;
      height: calc(100%);
      box-sizing: border-box;
      // padding-top:24px;
      overflow: auto;
      .lis-head {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 16px;
        .icon-view {
          margin-right: 8px;
          position: relative;
          width: 14px;
          height: 14px;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #10e7f9;
          }
          .icon-view-on {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #3480ff; /* 背景色 */
          }
        }
        .label-name {
          color: #000000;
          font-weight: bold;
          font-size: 14px;
          margin-right: 8px;
        }
        img {
          width: 14px;
          height: 14px;
          cursor: pointer;
        }
      }
    }
    .lis-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      .lis-i {
        width: calc(100% / 3);
      }
    }
  }
  :deep(.el-table__row) {
    .el-input .el-input__wrapper {
      background: rgba(0, 0, 0, 0);
    }
  }
}
</style>
